import React from 'react'
import Jspang from '../components/Jspang'
import Link from 'next/link'
import Router from 'next/router'
import Head from '../components/header'

const Home = () => {
  // 路由发生变化时
  Router.events.on('routeChangeStart', (...args) => {
    console.log('routeChangeStart rout change', args)
  })
  // 路由结束变化时
  Router.events.on('routeChangeComplete', (...args) => {
    console.log('routeChangeComplete rout change', args)
  })
  // 浏览器history触发前
  Router.events.on('beforeHistoryChange', (...args) => {
    console.log('beforeHistoryChange rout change', args)
  })
  // 路由跳转发生错误时
  Router.events.on('routeChangeError', (...args) => {
    console.log('routeChangeError rout change', args)
  })
  // 转变成hash路由模式
  Router.events.on('hashChangeStart', (...args) => {
    console.log('hashChangeStart rout change', args)
  })
  // 转变成hash路由模式
  Router.events.on('hashChangeComplete', (...args) => {
    console.log('hashChangeComplete rout change', args)
  })

  return (
    <div>
      <Head/>
        <Jspang>哈哈</Jspang><br/><br/>
        <div>
          标签跳转<br/>
          <Link href="/page1">page1</Link> <br/><br/>
          <Link href="/page2">page2</Link> <br/><br/>


          编程式跳转<br/>
          <button onClick={() => {Router.push('/page1')}}>去 page1 页面</button> <br/><br/>
          <button onClick={() => {Router.push({pathname:'/page3',query:{name:'hui619'}})}}>去 page2 页面</button> <br/><br/>
          <button onClick={() => {Router.push('/page3?name=magee')}}>去 page3 页面</button> <br/><br/>

          <button onClick={goPage2}>去 page2 页面</button> <br/><br/>
          <button onClick={goPage3}>去 page3 页面</button> <br/><br/>

          <Link href="#abc"><a>hash模式</a></Link>

        </div>
    </div>
   )

   function goPage2 () {
     Router.push('/page2')
   }

   function goPage3 () {
    // Router.push('/page3?name=magee')
    Router.push({
      pathname:'/page3',
      query:{
        name:"magee"
      }
    })
  }
}

export default Home
